<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tween by 张鑫旭大大</title>
  <style>
    p {
      margin: 0 0 10px 0;
    }
    #container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .divWrapper {
      position: relative;
      height: 100px;
    }
    .item {
      width: 40px;
      height: 40px;
      background: #00bbff;
      border-radius: 50%;
      position: absolute;
    }
  </style>
  <script src="./tweenByZXX.js"></script>
  <script src="./animation.js"></script>
</head>
<body>
  <div id="container"></div>
<script>
  var oDiv = document.getElementById('container');

  function build(obj, parentKey) {
    if(typeof obj !== 'object') {
      return;
    }
    for(var key in obj) {
      if(obj.hasOwnProperty(key)) {
        if(typeof obj[key] === 'object') {
          build(obj[key], key);
        } else if(typeof obj[key] === 'function') {
          if(parentKey) {
            createDom(obj, key, parentKey);
          } else {
            createDom(obj, key);
          }
        } else {
          return;
        }
      }
    }
  }

  function createDom(obj, key, parentKey) {
    var p = document.createElement('p');
    var div = document.createElement('div');
    div.className = 'item';
    if(parentKey) {
      p.innerText = '缓动函数' + parentKey + '.' + key + '：';
      div.id = parentKey + '.' + key;
    } else {
      p.innerText = '缓动函数' + key + '：';
      div.id = key;
    }
    div.onclick = handleClick;
    var divWrapper = document.createElement('div');
    divWrapper.className = 'divWrapper';
    divWrapper.appendChild(p);
    divWrapper.appendChild(div);
    oDiv.appendChild(divWrapper);
  }

  //各个item点击事件处理函数
  function handleClick(e) {
    var event = e || window.event;
    var target = event.target;
    var easeFunction = target.id;
    var fnReq = Math.animation(0, 700, 1000, easeFunction, function(value, end) {
      if(!end) {
        // console.log(value);
        target.style.left = value + 'px';
      } else {
        cancelAnimationFrame(fnReq());
      }
    })
  }

  build(Tween);
</script>
</body>
</html>